<!DOCTYPE html>
<html>
	<head>
		<title>Simple jQuery slider - Simple but powerful slideshow</title>
		<meta name="description" content="A simple but really powerful slider that does what a slider has to do: slide slides.">
		<!-- Include demo stylesheet -->
		<link href="style.css" rel="stylesheet" type="text/css">


		<!-- Get jQuery from CDN -->
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		
		<!-- Include the slider scripts -->
		<script type="text/javascript" src="js/transit.js"></script>
		<script type="text/javascript" src="js/touchSwipe.js"></script>
		<script type="text/javascript" src="js/simpleSlider.js"></script>
		<script type="text/javascript" src="js/backstretch.js"></script>
		<script>
			var mainslider;
			$(document).ready(function(){
			    var options = {
			        slides: '.slide', // The name of a slide in the slidesContainer
			        swipe: true,    // Add possibility to Swipe > note that you have to include touchSwipe for this
			        slideTracker: true, // Add a UL with list items to track the current slide
			        slideTrackerID: 'slideposition', // The name of the UL that tracks the slides
			        slideOnInterval: false, // Slide on interval
			        interval: 9000, // Interval to slide on if slideOnInterval is enabled
			        animateDuration: 1000, // Duration of an animation
			        animationEasing: 'ease', // Accepts: linear ease in out in-out snap easeOutCubic easeInOutCubic easeInCirc easeOutCirc easeInOutCirc easeInExpo easeOutExpo easeInOutExpo easeInQuad easeOutQuad easeInOutQuad easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInBack easeOutBack easeInOutBack
			        pauseOnHover: false // Pause when user hovers the slide container
			    };

			    $(".slider").simpleSlider(options);
			    mainslider = $(".slider").data("simpleslider");
			    /* yes, that's all! */

			    $(".slider").on("beforeSliding", function(event){
			        var prevSlide = event.prevSlide;
			        var newSlide = event.newSlide;
			        $(".slider .slide[data-index='"+prevSlide+"'] .slidecontent").fadeOut();
			        $(".slider .slide[data-index='"+newSlide+"'] .slidecontent").hide();
			    });

			    $(".slider").on("afterSliding", function(event){
			        var prevSlide = event.prevSlide;
			        var newSlide = event.newSlide;
			        $(".slider .slide[data-index='"+newSlide+"'] .slidecontent").fadeIn();
			    });

			    $(".slide#first").backstretch("images/bg1.jpg");
			    $(".slide#sec").backstretch("images/bg2.jpg");
			    $(".slide#thirth").backstretch("images/bg4.jpg");
			    $(".slide#fourth").backstretch("images/bg5.jpg");

			    $('.slide .backstretch img').on('dragstart', function(event) { event.preventDefault(); });

			    $(".slidecontent").each(function(){
			        $(this).css('margin-top', -$(this).height()/2);
			    });
			});
		</script>


	</head>
	<body>

		<div class='pagewrap'>
			
			<div class='pageblock' id='fullscreen'>
				<div class='slider'>
					<div class='slide' id="first">
						<div class='slidecontent'>
							<span class="headersur">It's powerful and at the same time a</span>
							<h1>SIMPLE SLIDER</h1>
							<div class="button" onclick="mainslider.nextSlide();">Let me show you how simple</div>
						</div>
					</div>
					<div class='slide' id="sec">
						<div class='slidecontent'>
							<span class="headersur">Grab your shit together and</span>
							<h1>INCLUDE</h1>
							<div class="text">
								<p>Go to the  Github page and download the simpleslider.js file. Don't forget to download the touchswipe.js and transit.js if you're going for a complete (and still simple) slider.<br>Now you have the files you can include them in your header.</p>

								<xmp><script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="transit.js"></script>
<script type="text/javascript" src="touchSwipe.js"></script>
<script type="text/javascript" src="simpleSlider.js"></script></xmp>

								<div class="button" onclick="mainslider.nextSlide();">Done? Let's move on!</div>
							</div>
						</div>
					</div>
					<div class='slide' id="thirth">
						<div class='slidecontent'>
							<span class="headersur">Time to start this party</span>
							<h1>BIND IT</h1>
							<div class="text">
								<p>Now it's time to bind the simpleslider on your HTML element. Check the  Github README for an example HTML.</p>
								<xmp>$(document).ready(function(){
    $(".slider").simpleSlider();
});</xmp>
								<div class="button" onclick="mainslider.nextSlide();">Done? Let's move on again!</div>
							</div>
						</div>
					</div>
					<div class='slide' id="fourth">
						<div class='slidecontent'>
							<span class="headersur">And you're done! Grab a beer and</span>
							<h1>WATCH</h1>
							<div class="text">
								<p>SimpleSlider will now do the rest. Are you looking for more options? Check the Github readme!</p>
								<p>SimpleSlider standard comes with a few methods, triggers and a tracker. These are all easy to configure. More information about them can be found on the Github page<br/>Btw, this site has been made using simpleslider! </p>

							</div>
						</div>
					</div>
				</div>
			</div>

			</div>
		</div>

	</body>
</html>
